<template>
	<section class="js-mind-box">
		<div :class="{'status-types': true, 'not-show': mindId !== 'mind-box'}">
			<span v-for="item in statusTypes" :key="item" class="status-item">{{ item }}</span>
		</div>
		<div :id="mindId" class="js-mind"></div>
	</section>
</template>

<script>
import './jsmind/style/jsmind.scss'
import jsMind from './jsmind/js/jsmind.js'
import {mindData }from './mock'

export default {
	name: 'JsMind',

	props: {
		mindId: {
			type: String,
			default: 'mind-box'
		},

    isShort: {
      type: Boolean,
      default: false
    },

		// mindData: {
		// 	type: Object,
		// 	default: () => ({
		// 		evaluationTarget: '电站',
		// 		fraction: '--',
		// 		totalSystemScore: '--',
		// 		id: 1,
		// 		idLevel: '1_0',
		// 		level: 0,
		// 		noteName: '暂无数据',
		// 		params: {},
		// 		parentName: '',
		// 		children: []
		// 	})
		// },

		isEditable: {
			type: Boolean,
			default: false
		},

		statusTypes: {
			type: Array,
			default: () => ['正常状态', '注意状态', '异常状态', '危险状态']
		}
	},

	data() {
		return {
			jm: null,
			mind: {
				meta: {
					name: '状态评价',
					author: '-----@163.com',
					version: '0.2'
				},
				format: 'node_tree',
				data: mindData
			},
      hasLevelThree: true
		}
	},

	watch: {
		// mindData: {
		// 	handler(val) {
    //     document.getElementById(this.mindId).innerHTML = '' // 清除前一个JSMind
    //     this.hasLevelThree = this.mindData.children.some(item => {
    //       return !!item.children
    //     })

		// 		this.mind.data = val
		// 		// this.jm.show(this.mind)
    //     this.loadJsMind()
		// 	},
		// 	deep: true
		// }
	},

	mounted() {
		this.loadJsMind()
	},

	methods: {
		// 获取JSMind数据
		getMindData() {
			return this.jm.get_data().data
		},

		// 创建jsMind
		loadJsMind() {
			const options = {
				container: this.mindId,
				editable: this.isEditable,
				view: {
					engine: 'canvas',
					line_width: 2,
					line_color: '#236cd0'
				},
				layout: {
			    hspace: this.isShort ? 20 : this.hasLevelThree ? 150 : 300,
					vspace: 10
				}
			}

			this.jm = new jsMind(options)
			this.jm.show(this.mind)

			document.getElementById(this.mindId).onclick = e => {
					if (e.target.className === 'm-score' || e.target.className === 'm-score-total') {
					var id_level =  e.target.parentNode.getAttribute('nodeid')
					if(id_level === null){
						id_level =  e.target.parentNode.parentNode.getAttribute('nodeid')
					}
					var noteName=e.target.parentNode.parentNode.querySelector('.m-label')?.innerText;
					this.$emit('node-click',id_level, noteName)
				}else if(e.target.className === 'm-label'){
					var id_level =  e.target.parentNode.getAttribute('nodeid')
					var noteName=e.target.parentNode.querySelector('.m-label')?.innerText;
					this.$emit('node-click',id_level, noteName)
				}
				return
				if (e.target.className === 'm-label' || e.target.className === 'm-value') {
					const score = e.target.parentNode
						.querySelector('.m-score-total')
						?.innerHTML.split('：')[1]
					this.$emit('node-click', e.target.parentNode.getAttribute('nodeid'), score)
				} else if (e.target.className === 'm-score' || e.target.className === 'm-score-total') {
					const score = e.target.parentNode.parentNode
						.querySelector('.m-score-total')
						?.innerHTML.split('：')[1]
					this.$emit('node-click', e.target.parentNode.parentNode.getAttribute('nodeid'), score)
				}
			}
		},

    // 重置主题
    resetJsMindTheme(theme) {
      this.jm.set_theme(theme)
    }
	}
}
</script>

<style lang="scss" scoped>
// @import '../../../../utils/jsmind/style/jsmind.scss';
.js-mind-box {
	height: 100%;

	.js-mind {
		height: calc(100% - 44px);

		// ::v-deep jmnode[nodeid$='_2'] .m-value {
			// color: #555;
			// background: #bcd8ff;
		// }
	}

	.status-types {
		padding: 10px 0;
		text-align: center;
		font-size: 16px;
		color: #333;
		z-index: 3;

		.status-item {
			position: relative;
			padding: 0 20px;

			&::before {
				content: '';
				position: absolute;
				top: 3px;
				left: 0;
				width: 16px;
				height: 16px;
			}

			&:nth-of-type(1)::before {
				background-color: #2fd023;
			}

			&:nth-of-type(2)::before {
				background-color: #ffcc00;
			}

			&:nth-of-type(3)::before {
				background-color: #ff9600;
			}

			&:nth-of-type(4)::before {
				background-color: #ff3600;
			}
		}

		&.not-show {
			visibility: hidden;
		}
	}
}
</style>
